<template>
	<div class="container">
		<el-container>
			<el-aside class="aside">
				<navTabs></navTabs>
			</el-aside>
			<el-container>
				<el-header class="header">
					<headers></headers>
				</el-header>
				<el-main class="main">
					<routers :name="name"></routers>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import navTabs from '@/view/compents/navTabs'
	import headers from '@/view/compents/header'
	import routers from '@/view/compents/router_view'
	export default {
		components:{
			navTabs,
			headers,
			routers
		},
		data(){
			return {
				name: 'chart'
			}
		},
		methods:{

		}
	}
</script>

<style lang="scss" scoped>
	.el-header{
		padding: 0;
	}
	.container {
		width: 100vw;
		height: 100vh;
	}

	.aside {
		width: 14vw !important;
		height: 100vh;
		background-color: #21325E;
		overflow-x: hidden;
	}

	.aside::-webkit-scrollbar{
		display: none;
	}

	.header {
		// width: 88vw !important;
		height: 12vh !important;
	}

	.main {
		// width: 88vw !important;
		height: 88vh !important;
		background-color: #F2F3F5;
	}
</style>
